
<template>
	<div class="mobileMonitorDetail" v-loading="mobileMonitorDetailLoading">
		<div class="inventoryInfo">
      <div class="title">数据列表
        <span class="formAddBtn" v-show="createPointBtn">
          <el-button class="greenBtn" size="mini" @click="routerMonitorInput">新增站点</el-button>
        </span>
      </div>
      <el-table :data="mobileData.curDetail"  size="mini" border
        :header-cell-style="{color: '#444444', backgroundColor: '#f4f4f9', borderBottom: 'none'}"
      >
        <el-table-column
          prop="pollutantName"
          label="点位名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="监测时间"
          width="90"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pollutionIndex"
          label="污染指数"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.pollutionIndex > standard.pollutionIndex ? 'TableWarnRed' : '']">{{scope.row.pollutionIndex.toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="waterStatus"
          label="水质状况"
          align="center">
        </el-table-column>
        <el-table-column
          prop="position"
          label="地理位置"
          width="180"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.longitude}} , {{scope.row.latitude}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ph"
          label="pH"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.ph < standard.ph.min || scope.row.ph > standard.ph.max ? 'TableWarnRed' : '']">{{scope.row.ph}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cod"
          label="CODcr mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.cod > standard.cod ? 'TableWarnRed' : '']">{{scope.row.cod}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ammoniaNitrogen"
          label="氨氮 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.ammoniaNitrogen > standard.ammoniaNitrogen ? 'TableWarnRed' : '']">{{scope.row.ammoniaNitrogen}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="phosphorus"
          label="总磷 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.phosphorus > standard.phosphorus ? 'TableWarnRed' : '']">{{scope.row.phosphorus}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nitrogen"
          label="总氮 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.nitrogen > standard.nitrogen ? 'TableWarnRed' : '']">{{scope.row.nitrogen}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cuprum"
          label="总铜 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.cuprum > standard.cuprum ? 'TableWarnRed' : '']">{{scope.row.cuprum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickel"
          label="总镍 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.nickel > standard.nickel ? 'TableWarnRed' : '']">{{scope.row.nickel}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chromium"
          label="总铬 mg/L"
          :width="detailListTableW1"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.chromium > standard.chromium ? 'TableWarnRed' : '']">{{scope.row.chromium}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="prussiate"
          label="总氰化物 mg/L"
          :width="detailListTableW2"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.prussiate > standard.prussiate ? 'TableWarnRed' : '']">{{scope.row.prussiate}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- <div class="relevantSites">
      <div class="title">相关站点</div>
      <div class="siteList">
        <div class="item" v-for="(item, index) of relevantSitesList" :key="index">
          <img :src="item.img" alt="">
          <span>{{item.name}}</span>
        </div>
      </div>
    </div> -->

    <div class="livePhotos">
      <div class="title">现场照片</div>
      <viewer :images="mobileData.curDetailPhoto">
        <div class="imgList">
          <div class="item" v-for="(item, index) of mobileData.curDetailPhoto" :key="index">
            <img :src="'http://47.112.16.168:' + item.img" alt="">
            <div class="name">{{item.name}}</div>
          </div>
        </div>
      </viewer>
    </div>
	</div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import standard from "../plugins/standard"
export default {
  name: 'mobileMonitorDetail',
  data () {
    return {
      msg: 'hello mobileMonitorDetail!',
      mobileMonitorDetailLoading: false,
      createPointBtn: false,
      curroutingName: '',
      detailListTableW1: 60,
      detailListTableW2: 70,
      relevantSitesList: [
        {
          img: '/img/siteImg.png',
          name: '沙井二期',
        },
        {
          img: '/img/siteImg.png',
          name: '沙井二期',
        },
      ],

      standard
		}
  },
  methods: {
    ...mapMutations([
      'changeMobileDataDetail'
    ]),
    ...mapActions(['getMobileMonitorData']),
    routerMonitorInput() {
      this.$router.push({path: '/mobileMonitor/overview/input', query:{name: this.curroutingName}})
    }
  },
  async created() {
    this.mobileMonitorDetailLoading = true
    await this.getMobileMonitorData({pageSize: 9999})
    if(document.documentElement.clientWidth < 1600) {
      this.detailListTableW1 = 60
      this.detailListTableW2 = 70
    }else {
      this.detailListTableW1 = ''
      this.detailListTableW2 = ''
    }
    this.curroutingName = this.$route.query.name
    const roles = this.userInfo.roles
    if(this.mobileData.data.length) {
      let curDetail = this.mobileData.data.find(v => v.routingName === this.$route.query.name)
      // 环保 和 运维人员 没有按钮权限
      this.createPointBtn = !(roles.includes('manager') || roles.includes('operator')) && !(curDetail.pointNumber <= curDetail.monitoringDataList.length)
      if(this.createPointBtn) {
        this.$notify.warning({
          title: '提示',
          message: '站点信息未全部上传完毕，请及时上传!'
        })
      }
      this.changeMobileDataDetail(curDetail.monitoringDataList)
      this.mobileMonitorDetailLoading = false
    }else {
      this.$router.push('/mobileMonitor/overview')
      this.$notify({
        type: 'warning',
        title: '提示',
        message: '参数错误请重新选择',
      })
    }
  },
  computed: {
    ...mapGetters({
      mobileData: 'getMobileData',
      userInfo: "getUserInfo"
    })
  },
}
</script>
<style scoped>
.mobileMonitorDetail {}

.mobileMonitorDetail .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
}
.mobileMonitorDetail .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.inventoryInfo {
  background: #fff;
  padding: 0 35px 15px 35px;
  margin-bottom: 20px;
}
.relevantSites {
  background: #fff;
  padding: 0 35px 35px 35px;
  margin-bottom: 15px;
}
.relevantSites .siteList {
  display: flex;
  flex-direction: row;
}
.relevantSites .siteList .item {
  height: 50px;
  line-height: 50px;
  margin-right: 25px;
}
.relevantSites .siteList .item img {
  margin-right: 5px;
  vertical-align: middle;
}

.livePhotos {
  background: #fff;
  padding: 0 35px 35px 35px;
}
.livePhotos .imgList {
  display: flex;
  flex-direction: row;
}
.livePhotos .imgList .item {
  position: relative;
  width: 118px;
	height: 118px;
	background-color: #f6f6f6;
	border-radius: 10px;
	border: solid 1px #e5e5e5;
  overflow: hidden;
  margin-right: 15px;
  text-align: center;
}
.livePhotos .imgList .item .name {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 26px;
  line-height: 26px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.livePhotos .imgList .item img {
  width: 120%;
  margin-left: -10%;
  height: 100%;
}
</style>
